.app-top-nav{
  background-color:#2d2e2e;
  .logo{
    width:40px;
  }
  .app-header-info{
    height:76px;
    line-height:76px;
    border-bottom:1px solid #e7e7e7;
    box-shadow:1px 1px 0 #f2f2f2;
  }
  .app-header-bar{
    margin:0 auto;
    a.title{
      color:#fff;
      font-size:14px;
      &:hover{
        color:var(--theme-color);
      }
    }
  }
  .app-search-meta{
    a{
      font-size:16px;
      color:#999;
      &:hover{
        color:var(--theme-color);
      }
    }
    .el-space__item + span{
      color:#999;
      font-size:14px;
      font-family:Serif;
    }
  }
  .app-header-main{
    height:56px;
    line-height:56px;
    margin:0 auto 2px;
  }
}
.app-header-search{
  position:relative;
  .el-form-item{
    margin-bottom:0;
  }
  .search-input{
    outline:none;
    position:relative;
    display:block;
    border:1px solid #ececec;
    padding:5px 25px;
    width:100%;
    border-radius:500px;
    background-color:transparent;
    transition:all .3s ease-out;
  }
  .search-to{
    background-color:var(--theme-color);
    font-size:16px;
    font-weight:700;
    height:35px;
    line-height:35px;
    padding:0;
    position:absolute;
    right:0;
    text-align:center;
    top:0;
    border-radius:0 50% 50% 0;
    width:38px;
    z-index:9;
    color:#fff;
  }
}
.app-nav-search{
  .el-input{
    margin-right:-2px;
  }
  .el-input__wrapper{
    border-radius:15px 0 0 15px;
    box-shadow:none;
    border:1px solid #ccc;
    border-right:0;
  }
  .el-button{
    border-radius:0 15px 15px 0;
    box-shadow:none;
    border:1px solid #ccc;
    border-left:0;
    height:34px;
    line-height:34px;
  }
  .el-form-item{
    margin-bottom:0;
  }
  .el-form-item__content{
    justify-content:flex-end;
  }
}
.app-el-menu{
  border-bottom:0;
  .is-active{
    font-weight:bold;
  }
  .el-menu-item{
    height:75px;
    line-height:75px;
    font-size:18px;
    --el-menu-active-color:var(--theme-color);
    &:hover{
      --el-menu-hover-text-color:#ff0;
    }
  }
}
.swiper{
  .swiper-button-prev, .swiper-button-next{
    display:none;
  }
  &:hover{
    .swiper-button-prev, .swiper-button-next{
      display:block;
    }
  }
}
.app-home-swiper{
  .swiper-slide{
    img{
      width:100%;
      height:350px;
    }
  }
}
.app-home-section{
  .title{
    text-align:center;
  }
  h1{
    font-size:32px;
    margin-bottom:6px;
  }
  h2{
    color:#adadad;
    font-size:14px;
  }
}
.app-home-project{
  padding:10px 0 0;
  border-bottom:1px solid #ccc;
  &:last-child{
    border-bottom:0;
  }
}
.app-project-container{
  .home-project-body{
  }
}
.home-project-list{
  .app-project-link{
    overflow:hidden;
    display:block;
    .img{
      height:265px;
      overflow:hidden;
      border-radius:8px;
      img{
        width:100%;
        transition:all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
      }
    }
    &:hover{
      img{
        transform:scale(1.2, 1.2)
      }
    }
    .info{
      padding:20px 0;
      text-align:center;
    }
  }
}
.app-project-col{
  animation-name:fadeInUp;
  position:relative;
}
.home-project-body{
  width:90%;
  margin:0 auto;
  padding:30px 0 0;
}
.app-about-content{
  line-height:35px;
  font-size:18px;
  p{
    margin-bottom:15px;
  }
}
.app-main{
  padding:30px 0;
  min-height:calc(100vh - 240px);
}
.ui-list{
  .app-body-container{
    padding:30px 0;
    .sidebar{
      width:250px;
      margin-right:50px;
    }
    .app-main{
      flex:1;
    }
  }
}
.app-list-main{
  flex:1;
}
.app-side-menu{
  border-right:0;
}
.app-news-list{
  min-height:calc(100vh - 280px);
  .el-col{
    .title{
      font-weight:bold;
      font-size:18px;
    }
    .link{
      color:var(--theme-color);
      &:hover{
        color:var(--theme-orange);
      }
    }
    padding-bottom:40px;
  }
  .el-icon{
    vertical-align:-2px;
  }
  .body{
    padding:20px 0;
  }
  .time{
    svg{
      color:orange;
    }
  }
  .category{
    svg{
      color:#b0c8b0;
    }
  }
  .meta{
    color:#ccc;
  }
}
.app-detail{
  .el-icon{
    vertical-align:-2px;
  }
  .title{
    font-weight:bold;
    font-size:22px;
    text-align:center;
  }
  .meta{
    color:#ccc;
  }
  .content{
    line-height:2;
    img{
      margin:20px auto;
      display:inherit;
      max-width:100%;
      height:auto;
    }
    p{
      margin-bottom:15px;
    }
  }
}
.app-view{
}
.app-contact-ruleForm{
  width:65%;
  margin:0 auto;
}
.img-captcha{
  border:1px solid var(--el-border-color);
  border-radius:3px;
}
.app-footer{
  border-top:1px solid var(--el-border-color);
  padding:40px 0;
  .copyright{
    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
  }
}
.search-title-txt{
  .search-icon{
    color:var(--theme-green);
    margin-top:-3px;
    font-size:17px;
  }
  i{
    color:var(--theme-orange);
    font-weight:bold;
  }
}
.app-page-search{
  min-height:calc(100vh - 250px);
}
.app-card-item{
  .image-slot{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    background:var(--el-fill-color-light);
    color:var(--el-text-color-secondary);
    font-size:30px;
  }
  .image-slot .svg{
    font-size:30px;
  }
  .meta{
    .time{
      font-size:14px;
      white-space:nowrap;
      color:var(--el-text-color-secondary);
    }
    .author{
      color:var(--el-color-success);
    }
  }
  .body{
    padding:10px 0;
    color:#a4a4a4;
  }
  .title{
    h3{
      @include ellipsisNum(2);
      line-height:24px;
      font-size:16px;
      font-weight:normal;
      font-weight:bold;
    }
  }
}
.app-card-col{
  margin-bottom:30px;
}
.app-category{
  .el-menu-item.is-active{
    background-color:var(--el-menu-hover-bg-color);
    border-left:4px solid;
  }
  .el-card{
    border:0;
  }
  .el-card__body{
    padding:0;
  }
}
